<template>
	<view class="wrap">
		<custom-nav-sq-xcx :isBack="true" currBg="usuallyBg" :needConBlock="true">
			<block slot="content">详情</block>
		</custom-nav-sq-xcx>
		<view class="sqConBlock"></view>
		<view class="sqConWrap">
			<view class="bbsTit">
				<text>失物招领</text>
				<text class="till">|</text>
				<text>反倒是离开房间放到手机离开房间多少</text>
			</view>
			<view class="puber spaceBet alignCen">
				<view class="puberInfo hasFlex alignCen">
					<view class="userHead flexAll">
						<view class="iconfont icon-sqDefHead"></view>
					</view>
					<view class="userName">张珊珊</view>
				</view>
				<view class="focus">
					<text class="iconfont icon-jia"></text>
					<text>关注</text>
					<!-- <text class="iconfont icon-duihao1"></text>
					<text>已关注</text> -->
				</view>
			</view>
			<view class="pubTime spaceBet">
				<view class="hasFlex">
					<view class="timeItem">收藏<text class="num">69</text></view>
					<view class="timeItem">点赞<text class="num">569</text></view>
				</view>
				<text>2023-12-236 23:02:33</text>
			</view>
			<view class=" bbsContent">
				<view class="content">发大水了空发大水了空间高房价的路流发大水了空间高房价的路过看见的佛教的历史开发建设了广泛的交流间高房价的路过看见的佛教的历史开发建设了广泛的交流K歌阶段防静电塑料封口机的身份来看待世间法发的睡觉了开发商建房</view>
				<view class="detImg spaceBet">
					<image class="detImgItem"
						v-for="(item,index) in bbsImgList"
						:key="index"
						:src="getStaticFilePath(item.src)"
						:data-src="item.src"
						@tap="previewImage"
					></image>
				</view>
			</view>
			<view class="end">
				<text>-</text>
				<text>End</text>
				<text>-</text>
			</view>
			<view class="allPl">全部评论</view>
			<sq-bbs-pl></sq-bbs-pl>
		</view>
		<pub-bot></pub-bot>
	</view>
</template>

<script>
	import SqBbsPl from './components/SqBbsPl'
	import PubBot from './components/PubBot'
	export default {
		components:{
			SqBbsPl,
			PubBot
		},
		data(){
			return{
				bbsImgList:[
					{src:'shequToolBg.png'},
					{src:'shequToolBg.png'},
					{src:'shequToolBg.png'}
				]
			}
		},
		methods:{
			// previewImage(e){
			// 	var current = e.target.dataset.src;
			// 	uni.previewImage({
			// 		current: current,
			// 		urls: this.bbsImgList
			// 	})
			// },
		}
	}
</script>

<style lang="scss">
	page{
		background: $sq-fuf;
	}
</style>
<style lang="scss" scoped>
	.wrap{
		padding-bottom: 100rpx;
	}
	.bbsTit{
		font-size: 30rpx;
		color: $sq-main0;
		font-weight: 600;
		margin-bottom: 20rpx;
		.till{
			margin: 0 15rpx;
		}
	}
	.puber{
		margin-bottom: 20rpx;
		.userHead{
			width: 76rpx;
			height: 76rpx;
			background:  #bf83ff;
			border-radius: 50%;
			color:#fff;
			margin-right: 15rpx;
			.iconfont{
				font-size: 36rpx;
			}
		}
		.userName{
			font-size: 28rpx;
			color: $sq-main0;
			font-weight: 600;
		}
		.focus{
			height: 46rpx;
			line-height: 46rpx;
			padding: 0 20rpx;
			color: $pss-sq-main;
			font-size: 26rpx;
			border: 1rpx solid $pss-sq-main-bg;
			border-radius: 16rpx;
			.iconfont{
				margin-right: 5rpx;
			}
			.icon-jia{
				font-size: 26rpx;
			}
		}
	}
	.pubTime{
		margin-bottom: 20rpx;
		font-size: 24rpx;
		color: $sq-main8;
		.timeItem:first-child{
			margin-right: 20rpx;
		}
		.num{
			margin-left: 10rpx;
		}
	}
	.content{
		font-size: 28rpx;
		color: $sq-main0;
		line-height: 46rpx;
		margin-bottom: 20rpx;
	}
	.detImg{
		margin-bottom: -20rpx;
		flex-wrap: wrap;
		.detImgItem{
			width: 48%;
			height: 240rpx;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
		}
	}
	.allPl{
		margin-bottom: 20rpx;
		font-size: 30rpx;
		color: $sq-main0;
		font-weight: 600;
	}
	.end{
		text-align: center;
		font-size: 26rpx;
		color: $sq-main8;
		padding: 30rpx 0 20rpx;
	}
</style>